<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>图片上传到七牛</title>
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<style>
	html,body{height:100%;margin:0;padding:0;background:#fff;}
	#wrap{padding:10px;}
	ul{margin:0;padding:0;list-style:none;}
	#file_list {display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding-top:10px;}
	#file_list li{position:relative;display:block;vertical-align:top;padding:5px 5px;border-radius:5px;}
	#file_list li.up-over {}
	#file_list li.up-now {}
	#file_list li.up-now:after{content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:rgba(255,255,255,0.8) url(loading.gif) center center no-repeat;border-radius:5px;z-index:999;}
	#file_list li:hover{background-color:#ddd;}
	#file_list li .picbox {display:flex;flex:0 0 auto;justify-content:center;overflow:hidden;position:relative;width:100%;padding-top:100%;align-items:center;}
	#file_list li .picbox img {display:block;max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);}
	#file_list li .up-over .picbox:after{content:url('data:image/svg+xml;%20charset=utf8,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M512%200C229.376%200%200%20229.376%200%20512s229.376%20512%20512%20512%20512-229.376%20512-512S794.624%200%20512%200z%22%20fill%3D%22%234AC711%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M855.552%20394.752l-358.4%20358.4a50.9952%2050.9952%200%200%201-72.192%200l-204.8-204.8c-18.944-19.968-18.944-51.2%200-71.168a50.5344%2050.5344%200%200%201%2072.192-1.024L460.8%20644.608l322.048-322.048c19.968-18.944%2051.2-18.944%2071.168%200%2020.48%2019.456%2020.992%2051.712%201.536%2072.192z%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');position:absolute;bottom:2px;right:2px;z-index:9;}
	#file_list li .tools {display:none;position:absolute;bottom:5px;right:5px;z-index:99;}
	#file_list li:hover .tools {display:block;}
	#file_list li .tools .remove{cursor:pointer;}
	#file_list li .tools .remove:after{content:url('data:image/svg+xml;%20charset=utf8,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M17%206h3a1%201%200%200%201%200%202h-1v11a3%203%200%200%201-3%203H8a3%203%200%200%201-3-3V8H4a1%201%200%201%201%200-2h3V5a3%203%200%200%201%203-3h4a3%203%200%200%201%203%203v1zm-2%200V5a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v1h6zm2%202H7v11a1%201%200%200%200%201%201h8a1%201%200%200%200%201-1V8zm-8%203a1%201%200%200%201%202%200v6a1%201%200%200%201-2%200v-6zm4%200a1%201%200%200%201%202%200v6a1%201%200%200%201-2%200v-6z%22%3E%3C/path%3E%3C/svg%3E');}
	#file_list li .namebox {font-size:14px;line-height:20px;max-height:40px;overflow:hidden;padding:5px 10px;text-align:center;display:flex;justify-content:center;align-items:flex-start;}
	#file_list li .namebox span{word-break:break-all;vertical-align:top;}
</style>
</head>
<body>
	<div class="main_order input" style="position:relative;height:50px;" id="wrap">
		<ul>
			<li style="float:left; width:120px; text-align:right;">图片上传：</li><!-- 带水印 -->
			<li class="col-md-9 ui-sortable">
				<div class="row">
			        <input type="hidden" id="domain" value="此处为七牛文件地址域名">
			        <input type="hidden" id="uptoken_url" value="此处为请求后台获取token地址">
			        <div class="col-md-12">
			             <div id="container">
			                 <a class="btn btn-default btn-lg " id="pickfiles" href="#" style="padding:6px 16px;">
			                 		<i class="glyphicon glyphicon-plus"></i>
			                        <span>添加图片</span>
			                 </a>
			             </div>
		            </div>
		        </div>
			</li>
		</ul>
	</div>
	<ul id="file_list"></ul>
<script type="text/javascript" src="/tinymce/js/tinymce/plugins/imguploadtoqiniu/components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/tinymce/js/tinymce/plugins/imguploadtoqiniu/components/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="/tinymce/js/tinymce/plugins/imguploadtoqiniu/components/plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="/tinymce/js/tinymce/plugins/imguploadtoqiniu/js/qiniu.min.js"></script>
<script type="text/javascript" src="/tinymce/js/tinymce/plugins/imguploadtoqiniu/js/ui.js"></script>
<script type="text/javascript" src="/tinymce/js/tinymce/plugins/imguploadtoqiniu/js/main.js"></script>
<script>
//参考地址：http://tinymce.ax-z.cn/more-plugins/axupimgs.php	此上传是在这个案例基础上修改的，方法并不完整，但是足够使用了
//为列表添加排序
function reSort(){
    document.querySelectorAll('#file_list li').forEach((el,i)=>{
        el.setAttribute('data-num',i);
    });
}
var observ_flist = new MutationObserver( (muList,observe)=>{
    if(muList[0].addedNodes.length>0){
        muList[0].addedNodes.forEach((el)=>{
            el.querySelector('.remove').addEventListener('click',(e)=>{
                var li = e.target.parentNode.parentNode;
                var n = li.getAttribute('data-num');
                var el = document.querySelectorAll('#file_list li')[n];
                el.parentNode.removeChild(el);
                file_list.splice(n,1);
            });
        });
    }
    reSort();
});
</script>
</body>
</html>
